/*
* @Author: lenovo
* @Date:   2017-12-07 19:57:28
* @Last Modified by:   lenovo
* @Last Modified time: 2017-12-12 10:09:22
*/

var page={
	wrap:document.getElementsByClassName("wrap")[0],
	nav:document.getElementsByClassName("nav")[0],
	navLis:document.getElementsByClassName("nav-li"),
	mainNavLis:document.getElementsByClassName("main-nav-li"),
	//屏幕可见高度
	avaiH:document.documentElement.clientHeight,
	bgDiv:document.getElementsByClassName("bg-div")[0],
	//主体部分
	mainWrap:document.getElementsByClassName("main-wrap")[0],
	//获取主体的内容部分
	content:document.getElementsByClassName("content")[0],
	partContentDivs:document.getElementsByClassName("part-content"),
	contentPartDivs:document.getElementsByClassName("part"),
	endWrap:document.getElementsByClassName("end-wrap")[0],
	endContent:document.getElementsByClassName("end-content"),
	getCanvas:document.getElementById("canvas"),
	getFilter:document.getElementById("filter"),
	getLand:document.getElementById("landscape"),
	cWidth:document.body.clientWidth,
	bodyHeight:document.body.clientHeight,
	circleImgs:document.getElementsByClassName("circle-img"),
	// 将背景图片地址和nav背景颜色，字体颜色,浮动方块颜色，存入数组
	colorArr:null,
	colorIndex:0,
	init:function(){
		// alert(document.body.offsetWidth);
		HTMLCollection.prototype.toArray=function(){
            return [].slice.call(this);
        }
		//根据浏览器大小渲染页面，最小宽度为360px
		this.renderPage();
		this.addEvent();
		//切换背景色
	},
	addEvent:function(){
		var _this=this;
		this.partContentDivs.toArray().forEach(function(curr,index){
			//点击盒子
			curr.addEventListener('click',function(){
				_this.toDetails(curr,index);
			});
			if(document.body.offsetWidth>544){
				curr.addEventListener("mouseover",function(){
					curr.getElementsByClassName("desc")[0].style.display="block";
					if(index==0){
						// curr.getElementsByClassName("desc")[0].style.transform="translateY(-100px)";
						// curr.getElementsByClassName("desc")[0].style.transform="translateY("+(-curr.getElementsByClassName("desc")[0].offsetHeight)+"px)";
						// curr.style.transform="skewZ(1.1)";
						curr.getElementsByClassName("title")[0].style.backgroundColor="rgb(42, 48, 60)";
						curr.getElementsByClassName("title")[0].style.color="white";
					}
					if(index==1){
						// curr.getElementsByClassName("desc")[0].style.transform="translateY(-100px)";
						curr.getElementsByClassName("desc")[0].style.transform="translateX("+(-curr.getElementsByClassName("desc")[0].offsetWidth-0.6)+"px)";
						curr.getElementsByClassName("title")[0].style.backgroundColor="rgb(42, 48, 60)";
						curr.getElementsByClassName("title")[0].style.color="white";
					}
					if(index==2){
						curr.getElementsByClassName("desc")[0].style.transform="translateY("+(curr.getElementsByClassName("desc")[0].offsetHeight)+"px)";
						curr.getElementsByClassName("title")[0].style.backgroundColor="rgb(42, 48, 60)";
						curr.getElementsByClassName("title")[0].style.color="white";
					}
				});
				curr.addEventListener("mouseleave",function(){
					
					if(index==0){
						// curr.getElementsByClassName("desc")[0].style.transform="translateY(-100px)";
						// curr.style.transform="scaleZ(1)";
						curr.getElementsByClassName("title")[0].style.backgroundColor="white";
						curr.getElementsByClassName("title")[0].style.color="rgb(42, 48, 60)";
					}
					if(index==1){
						// curr.getElementsByClassName("desc")[0].style.transform="translateY(-100px)";
						curr.getElementsByClassName("desc")[0].style.transform="translateX("+0+"px)";
						curr.getElementsByClassName("title")[0].style.backgroundColor="white";
						curr.getElementsByClassName("title")[0].style.color="rgb(42, 48, 60)";
					}
					if(index==2){
						// curr.getElementsByClassName("desc")[0].style.transform="translateY(-100px)";
						curr.getElementsByClassName("desc")[0].style.transform="translateY("+0+"px)";
						curr.getElementsByClassName("title")[0].style.backgroundColor="white";
						curr.getElementsByClassName("title")[0].style.color="rgb(42, 48, 60)";
					}
					curr.getElementsByClassName("desc")[0].style.display="none";
				});
			}
		});
		//三个超链接，进入对应页面
		this.mainNavLis[0].addEventListener("click",function(){
			_this.go("faceReco.html");
		});
		this.mainNavLis[1].addEventListener("click",function(){
			_this.go("faceCheck.html");
		});
		this.mainNavLis[2].addEventListener("click",function(){
			_this.go("gestureCheck.html");
		});
	},
	toDetails:function(obj,num){
		switch(num){
			case 0:{
				this.go("faceReco.html");
				break;
			}
			case 1:{
				this.go("faceCheck.html");
				break;
			}
			case 2:{
				this.go("gestureCheck.html");
			}
		}
	},
	go:function(url){
		// alert(url);
		window.location.href=url;
	},
	renderPage:function(){
		var _this=this;
		//最外包裹层（class=wrap）宽度
		var wwidth=this.wrap.offsetWidth;
		if(document.body.offsetWidth>544){
			this.wrap.style.height=this.avaiH+'px';
			this.navLis[0].style.width=wwidth*(1/10)+'px';
			this.navLis[1].style.width=wwidth*(1/12)+'px';
			this.navLis[1].style.marginRight=wwidth*(1/10)+'px';
			this.navLis[this.navLis.length-1].style.width=wwidth*(1/10)+'px';
			this.navLis[this.navLis.length-1].style.marginLeft=wwidth*(1/10)+'px';

			//中间的人脸识别，人脸检测，姿态检测项总宽度占浏览器宽度的5/10
			var mainNavWidth=wwidth*(4/10);
			this.mainNavLis.toArray().forEach(function(curr,index){
				curr.style.width=mainNavWidth/3+'px';
			});
			this.bgDiv.style.height=this.avaiH+"px";
			// alert(this.bgDiv.offsetHeight);
			//主体部分
			this.mainWrap.style.height=(this.avaiH-document.getElementsByClassName("nav")[0].offsetHeight)/1+'px';
			this.mainWrap.style.overflow="hidden";
			//主题内容部分
			this.content.style.top=(this.mainWrap.offsetHeight-300)/2+this.nav.offsetHeight/2+'px';
			this.contentPartDivs.toArray().forEach(function(curr,index){
				curr.style.width=_this.content.offsetWidth/3+'px';
			});
			//三个栏目div的主体部分
			this.partContentDivs.toArray().forEach(function(curr,index){
				curr.style.width=_this.contentPartDivs[index].offsetWidth*(3/5)+'px';
				curr.style.marginLeft=_this.contentPartDivs[index].offsetWidth*(1/5)+'px';
				// desc的top
				curr.getElementsByClassName("desc")[0].style.width=_this.contentPartDivs[index].offsetWidth*(3/5)+'px';
				curr.getElementsByClassName("desc")[0].style.height=(_this.partContentDivs[index].offsetWidth-0)+'px';
				curr.getElementsByClassName("desc")[0].style.marginTop=-(document.getElementsByClassName("title")[index].offsetTop+
					document.getElementsByClassName("title")[index].offsetHeight+
					document.getElementsByClassName("circle-img")[index].offsetHeight)+'px';

			});
				this.getCanvas.style.height=this.avaiH+'px';
				this.getCanvas.style.top=0+'px';
				this.getFilter.style.height=this.avaiH+'px';
				this.getFilter.style.top=0+'px';
				this.getLand.style.height=this.avaiH+'px';
				this.getLand.style.top=0+'px';
			this.circleImgs.toArray().forEach(function(curr,index){
				// alert(_this.partContentDivs[index].offsetWidth);
				curr.style.width=(_this.partContentDivs[index].offsetWidth-0)+'px';
				curr.style.height=(_this.partContentDivs[index].offsetWidth-0)+'px';
			});
			document.getElementsByClassName("circle-img-wrap").toArray().forEach(function (curr,index) {
				// body...
				curr.style.width=(_this.partContentDivs[index].offsetWidth-0)+'px';
				curr.style.height=(_this.partContentDivs[index].offsetWidth-0)+'px';
			});
			document.getElementsByClassName("desc").toArray().forEach(function(curr,index){
				if(index==0){
					curr.style.marginTop=-(_this.partContentDivs[index].offsetHeight)+'px';
					// curr.style.marginLeft=(_this.partContentDivs[index].offsetWidth)+'px';
				}
				if(index==1){
					curr.style.marginTop=-(_this.partContentDivs[index].offsetHeight)+'px';
					curr.style.marginLeft=(_this.partContentDivs[index].offsetWidth)+'px';
				}
				if(index==2){
					curr.style.marginTop=-(_this.partContentDivs[index].offsetHeight+_this.partContentDivs[index].offsetWidth)+"px";
				}
			});
			
		}else if(document.body.offsetWidth<=544){
			var nav=document.getElementsByClassName("nav")[0];
			var navUl=document.getElementsByClassName("nav-ul")[0];
			navUl.children[0].style.display="none";
			navUl.children[1].style.display="none";
			navUl.style.transition="all 500ms";
			document.getElementsByClassName("menu")[0].style.display="block";
			var menutag=document.getElementsByClassName("menu")[0];
			var menuspan=menutag.children[1];
			// alert(document.documentElement.clientHeight);
			this.bgDiv.style.height=document.documentElement.clientHeight+"px";
			menuspan.addEventListener("click",function(){
				if(new RegExp("justify").test(menutag.children[1].className)){
						navUl.style.display="block";
						navUl.style.zIndex=100;
						_this.content.style.position="absolute";
						_this.content.style.zIndex=1;
						menutag.children[1].className="glyphicon glyphicon-remove";
				}
				else if(new RegExp("remove").test(menutag.children[1].className)){
						navUl.style.display="none";
						menutag.children[1].className="glyphicon glyphicon-align-justify";
				}
			});
			
		}
	}
};
(function () {
	page.init();
})();
function Star(id, x, y){
	this.id = id;
	this.x = x;
	this.y = y;
	this.r = Math.floor(Math.random()*2)+1;
	var alpha = (Math.floor(Math.random()*10)+1)/10/2;
	this.color = "rgba(255,255,255,"+alpha+")";
}

Star.prototype.draw = function() {
	ctx.fillStyle = this.color;
	ctx.shadowBlur = this.r * 2;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
	ctx.closePath();
	ctx.fill();
}

Star.prototype.move = function() {
	this.y -= .15;
	if (this.y <= -10) this.y = HEIGHT + 10;
	this.draw();
}

Star.prototype.die = function() {
    stars[this.id] = null;
    delete stars[this.id];
}


function Dot(id, x, y, r) {
	this.id = id;
	this.x = x;
	this.y = y;
	this.r = Math.floor(Math.random()*5)+1;
	this.maxLinks = 2;
	this.speed = .5;
	this.a = .5;
	this.aReduction = .005;
	this.color = "rgba(255,255,255,"+this.a+")";
	this.linkColor = "rgba(255,255,255,"+this.a/4+")";

	this.dir = Math.floor(Math.random()*140)+200;
}

Dot.prototype.draw = function() {
	ctx.fillStyle = this.color;
	ctx.shadowBlur = this.r * 2;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
	ctx.closePath();
	ctx.fill();
}

Dot.prototype.link = function() {
	if (this.id == 0) return;
	var previousDot1 = getPreviousDot(this.id, 1);
	var previousDot2 = getPreviousDot(this.id, 2);
	var previousDot3 = getPreviousDot(this.id, 3);
	if (!previousDot1) return;
	ctx.strokeStyle = this.linkColor;
	ctx.moveTo(previousDot1.x, previousDot1.y);
	ctx.beginPath();
	ctx.lineTo(this.x, this.y);
	if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);
	if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);
	ctx.stroke();
	ctx.closePath();
}

function getPreviousDot(id, stepback) {
	if (id == 0 || id - stepback < 0) return false;
	if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];
	else return false;//getPreviousDot(id - stepback);
}

Dot.prototype.move = function() {
	this.a -= this.aReduction;
	if (this.a <= 0) {
		this.die();
		return
	}
	this.color = "rgba(255,255,255,"+this.a+")";
	this.linkColor = "rgba(255,255,255,"+this.a/4+")";
	this.x = this.x + Math.cos(degToRad(this.dir))*this.speed,
	this.y = this.y + Math.sin(degToRad(this.dir))*this.speed;

	this.draw();
	this.link();
}

Dot.prototype.die = function() {
    dots[this.id] = null;
    delete dots[this.id];
}


var canvas  = document.getElementById('canvas'),
	ctx = canvas.getContext('2d'),
	WIDTH,
	HEIGHT,
	mouseMoving = false,
	mouseMoveChecker,
	mouseX,
	mouseY,
	stars = [],
	initStarsPopulation = 80,
	dots = [],
	dotsMinDist = 2,
	maxDistFromCursor = 50;
if(document.body.clientWidth>544){
	// alert("a");
	setCanvasSize();
			init();
}


function setCanvasSize() {
	// console.log(canvas);
	WIDTH = document.documentElement.clientWidth,
    HEIGHT = document.documentElement.clientHeight;                      

	canvas.setAttribute("width", WIDTH);
	canvas.setAttribute("height", HEIGHT);
}

function init() {
	ctx.strokeStyle = "white";
	ctx.shadowColor = "white";
	for (var i = 0; i < initStarsPopulation; i++) {
		stars[i] = new Star(i, Math.floor(Math.random()*WIDTH), Math.floor(Math.random()*HEIGHT));
		//stars[i].draw();
	}
	ctx.shadowBlur = 0;
	animate();
}

function animate() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);

    for (var i in stars) {
    	stars[i].move();
    }
    for (var i in dots) {
    	dots[i].move();
    }
    drawIfMouseMoving();
    requestAnimationFrame(animate);
}

window.onmousemove = function(e){
	mouseMoving = true;
	mouseX = e.clientX;
	mouseY = e.clientY;
	clearInterval(mouseMoveChecker);
	mouseMoveChecker = setTimeout(function() {
		mouseMoving = false;
	}, 100);
}


function drawIfMouseMoving(){
	if (!mouseMoving) return;

	if (dots.length == 0) {
		dots[0] = new Dot(0, mouseX, mouseY);
		dots[0].draw();
		return;
	}

	var previousDot = getPreviousDot(dots.length, 1);
	var prevX = previousDot.x; 
	var prevY = previousDot.y; 

	var diffX = Math.abs(prevX - mouseX);
	var diffY = Math.abs(prevY - mouseY);

	if (diffX < dotsMinDist || diffY < dotsMinDist) return;

	var xVariation = Math.random() > .5 ? -1 : 1;
	xVariation = xVariation*Math.floor(Math.random()*maxDistFromCursor)+1;
	var yVariation = Math.random() > .5 ? -1 : 1;
	yVariation = yVariation*Math.floor(Math.random()*maxDistFromCursor)+1;
	dots[dots.length] = new Dot(dots.length, mouseX+xVariation, mouseY+yVariation);
	dots[dots.length-1].draw();
	dots[dots.length-1].link();
}
//setInterval(drawIfMouseMoving, 17);

function degToRad(deg) {
	return deg * (Math.PI / 180);
}
